<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    1. 要让一个元素不可见且在文档流中不占位，应该使用哪个 CSS 规则？（5分）
    A: display
    B: overflow
    C: opacity
    D: visibility
    A
    3. 从四个选项选出不同的一个：（5分）
    <!-- A： <nav>
    B： <img>
    C： <meta>
    D： <canvas> -->
    C
    
    4. 关于label元素，以下说法正确的有：（5分）
    A：label元素可以使用for属性关联表单控件，也可以将表单控件放置在它的内部
    B：当使用for属性来关联label元素和表单控件时，label元素的for属性要和表单控件的ID一致
    C：如果label元素内嵌套一个a链接，则点击该a链接不会触发页面跳转
    D：label元素内部可以嵌套另一个label元素
    D
    
    5. 你是如何理解语义化的？你用过哪些H5新增的标签吗？又有哪些标签被废弃了？（5分）

    6. input标签中的name和type属性分别有什么用？（5分）
    name 给这个input框赋予一个名字
    type 属性 决定这个输入框的功能
    不同的type属性值，对应的input有不同的功能
    默认值 text 纯文本 让用户输入的内容以明文形式呈现网页中
    password 让用户输入的内容以密文形式呈现网页中

    7. css选择器有哪几种？伪元素和伪类是如何使用的？区别是什么？
       （1） 属性选择器   兄弟选择器   类选择器   标签选择器
       （2） 伪元素：在相应的元素后面添加：before或：after，就可以在元素添加伪元素
             伪类：在相应的元素后面添加：before或：after，就可以在元素添加伪类
    8. reset.css 重置样式表的作用？（5分）

    9. css sprite是什么,有什么优缺点?（5分）

    10. transition 和 animation 拥有几个属性？使用过程需要注意什么？（5分）

    11. 盒子模型的理解、区别和实践用处（5分）

    12. css中隐藏元素的方法，display:none, visibility:hidden,区别？还有别的方式吗？
    13. CSS 三大特性分别是什么？并谈谈你对权重的认识，如何计算？（5分）
            css三大特性：层叠   优先级   继承
            权重越大，选择器就有先
            权重  权重=每类选择器的个数  乘以  选择器权值 并相加
			  css  选择器权值
			  行内：1000
			  id：100
			  类名：10
			  标签：1
              通配：0
              注意：在所有的权权重比较中，如果在样式中出现 ！important的时候
      就不存在权重的比较，   ！important永远是最高级
      
    14. 响应式bootstrap和自适应rem的原理及其使用场景？（5分）
        bootstrap:需要容器container，自动将容器的每一行row（清除浮动），划分为12列
        rem：rem是一个相对单位，js去计算font-size   适用于移动端
    15. 页面导入样式时，使用 link 和 @import 有什么区别？

    16. 请简单描述scss是什么？优点是什么？你用过scss具体的什么内容？
    17. bfc是什么？目的是什么？如何触发？使用场景有哪些？
    决定了元素之间的关系和位置，提供一定规则进行布局.简单理解：就是给html元素添加了一个属性 bfc属性
    只需要设置一些css属性  
    1.float不为nome
    2.position 不为realtive和static
    3.overflow设置为auto scroll  hidden
    18. 请制作圆形，矩阵圆形，等腰三角形，不等边的垂直三角形（提示：鼎搜）
    <style>
        .yuan{
            width: 50px;
            height: 50px;
            background-color: brown;
            border-radius: 50%;
        }
        .ju{
            width: 80px;
            height: 50px;
            background-color: burlywood;
            border-radius: 25px;
        }
        .sanjiao{
            width: 0;
            height: 0;
            border: solid 50px transparent;
            border-bottom: solid 50px turquoise;
        }
        .budeng{
            width: 0;
            height: 0;
            border: solid 35px transparent;
            border-bottom: solid 50px red;
            border-right: solid red 25px;

        }
    </style>
    <div class="yuan"></div>
    <div class="ju"></div>
    <div class="sanjiao"></div>
    <div class="budeng"></div>
    19. 如何让多个块级元素共行显示，写出不少于3种方案？并写出每种方案的优缺点？
    1.设置弹性 display:inline-block
    <style>
        .baba{
            width: 150px;
            height: 150px;
            border: solid;
            display: inline-block;
        }
        .gong{
            width: 100px;
            height: 50px;
            border: solid springgreen;
        }
    </style>
<div class="baba">
    <div class="gong">11</div>
</div>
    2.利用浮动 float-left
<style>
    .baba{
        width: 150px;
        height: 150px;
        border: solid;
        float: left;
    }
    .son{
        width: 20px;
        height: 20px;
    }
</style>
<div class="baba">
    <div class="son">22</div>
</div>
    3.设置弹性盒子 display:flex
<style>
    .baba{
        width: 150px;
        height: 150px;
        border: solid;
        display: flex;
    }
    .son{
        width: 20px;
        height: 20px;
    }
</style>
<div class="baba">
    <div class="son"></div>
</div>
    20. 如何使元素水平垂直居中，请写出不少于3种方案；

    21. 如何实现两栏布局中的左定宽右自适应和三栏布局中，左右两边定宽，中间自适应的布局？
</body>
</html>